/**
 * Created by Administrator on 2017/10/11.
 */

import React from 'react';
import css from './index.less';
import PropTypes from 'prop-types';
import { Icon } from 'antd';
import { observer, inject } from 'mobx-react';


@inject('store')
@observer
export default class PolyRender extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

    };
  }

  static propTypes = {
    mod: PropTypes.object,
  };


  isDelete() {
    const { delArea = () => {}, ind } = this.props;
    delArea(ind);
  }
  mouseDown() {
    const { mouseDown = () => {}, ind} = this.props;
    mouseDown(ind);
  }

  renderSvg(arr) {
    const { width, height, background, borderWidth, borderColor } = this.props.mod;
    let dd = '';
    arr.forEach( (item, index) => {
      if (index === 0) {
        // arr[0] = 'M' + arr[0];
        dd += 'M' + item + ' ';
      } else if (index !== 0 && index % 2 === 0) {
        // arr[index] = 'L' + arr[index];
        dd += 'L' + item + ' ';
      } else {
        dd += item + ' ';
      }
    });
    dd = dd + 'Z';
    // console.log('dd===', dd);

    return (<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width={width} height={height}>
      <path d={dd} fill={background} strokeWidth = {borderWidth} stroke={borderColor}/>
    </svg>);
  }


  // polyRender() {
  //   polyData.map( (item, index) => {
  //     console.log('item', item);
  //     let props = {
  //       width: 100,
  //       height: 100,
  //       backgroundColor: 'red',
  //       key: index,
  //       borderTop: '50px solid transparent',
  //       borderRight: '50px solid transparent',
  //       borderBottom: '50px solid olive',
  //       borderLeft: '50px solid transparent',
  //       style: {
  //         transform: `rotate(${item.rotate}deg)`,
  //       }
  //     };
  //     return <div {...props}>{index}</div>
  //   })
  // }

  render() {
    const { mod, isActive } = this.props;
    const { side, width, height, } = mod;

    // 点的顺序是左下角顺时针
    const pathD = [
      [
        (width / 2) * (1 - Math.sin( Math.PI / 3)), (height / 2) * (1 + Math.cos( Math.PI / 3)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI / 3)), (height / 2) * (1 + Math.cos( Math.PI / 3)),
      ],
      [
        0, 0, width, 0,
        width, height, 0, height,
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        (width / 2) * (1 - Math.cos( Math.PI / 10)), (height / 2) * (1 - Math.sin( Math.PI / 10)),
        width / 2, 0,
        (width / 2) * (1 + Math.cos( Math.PI / 10)), (height / 2) * (1 - Math.sin( Math.PI / 10)),
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 6)), (height / 2) * (1 + Math.cos( Math.PI / 6)),
        0, height / 2,
        (width / 2) * (1 - Math.sin( Math.PI / 6)), (height / 2) * (1 - Math.cos( Math.PI / 6)),
        (width / 2) * (1 + Math.sin( Math.PI / 6)), (height / 2) * (1 - Math.cos( Math.PI / 6)),
        width, height / 2,
        (width / 2) * (1 + Math.sin( Math.PI / 6)), (height / 2) * (1 + Math.cos( Math.PI / 6)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 7)), (height / 2) * (1 + Math.cos( Math.PI / 7)),
        (width / 2) * (1 - Math.sin( Math.PI * 3 / 7)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 7)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 7)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 7)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 7)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 7)),
        (width / 2) * (1 + Math.sin( Math.PI * 3 / 7)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 7)),
        (width / 2) * (1 + Math.sin( Math.PI / 7)), (height / 2) * (1 + Math.cos( Math.PI / 7)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 4)), (height / 2) * (1 + Math.cos( Math.PI / 4)),
        0, height / 2,
        (width / 2) * (1 - Math.sin( Math.PI / 4)), (height / 2) * (1 - Math.cos( Math.PI / 4)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI / 4)), (height / 2) * (1 - Math.cos( Math.PI / 4)),
        width, height / 2,
        (width / 2) * (1 + Math.sin( Math.PI / 4)), (height / 2) * (1 + Math.cos( Math.PI / 4)),
        width / 2, height,
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 9)), (height / 2) * (1 + Math.cos( Math.PI / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 3 / 9)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 4 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 4 / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 9)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI * 4 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 4 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI * 3 / 9)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI / 9)), (height / 2) * (1 + Math.cos( Math.PI / 9)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 + Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 - Math.cos( Math.PI / 5)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 - Math.cos( Math.PI / 5)),
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 + Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        width / 2, height,
      ],
    ];


    const wrapperProps = {
      className: css.wrapper,
      style: mod.styleWrapper,
      onMouseDown: this.mouseDown.bind(this),
    };


    // const polyProps = {
    //   className: css.text,
    //   style: {
    //
    //     backgroundColor: 'red transparent',
    //     borderStyle: 'solid',
    //     borderWidth: '50px 50px 50px 50px'
    //
    //   }
    // };
    return (
      <div {...wrapperProps}>
        { isActive &&
        <Icon type="close-circle-o" className={css.delete} onClick={this.isDelete.bind(this)} />
        }
        {
          pathD.map( (item, index) => {
            return ( side - 3 === index && this.renderSvg(item));
          })
        }

      </div>
    );
  }
}
